<template>
	<view class="join page bgf5 c00 pt10">

		<image class="w100" mode="widthFix" show-menu-by-longpress="true"  src="https://img.quexiaqp.com/qx_gys.jpg"></image>
		<view class="bgff px15 py14">
			<view class="fs16 bold6">所在城市</view>
			<view class="inp borb pt18 mb12 flex flexC" @click="openLocation">
				<input disabled="disable" v-model="city" class="flex1 pb4" type="text" placeholder="点击选择城市">
			</view>
			<view class="fs16 bold6">您是</view>
			<view class="inp borb pt18 mb12 flex flexC">
				<radio-group class="mb10 " @change="role">
					<radio value="agent" color="#FFCC33" />
					代理商
					<radio value="factory" class="ml10" color="#FFCC33" />
					厂家
				</radio-group>
			</view>

			<view class="fs16 bold6">您公司名称</view>
			<view class="inp borb pt18 mb12 flex flexC">
				<input v-model="company" class="flex1 pb4" type="text" placeholder="请填写您公司的名字">
			</view>
			<view class="fs16 bold6">您的姓名</view>
			<view class="inp borb pt18 mb12 flex flexC">
				<input v-model="name" class="flex1 pb4" type="text" placeholder="请填写您的姓名">
			</view>
			<view class="fs16 bold6">产品类型</view>
			<view class="inp borb pt18 mb12 flex flexC">
				<input v-model="type" class="flex1 pb4" type="text" placeholder="请填写你的产品类型">
			</view>
			<view class="fs16 bold6">报价区间</view>
			<view class="inp borb pt18 mb12 flex flexC">
				<input v-model="price" class="flex1 pb4" type="text" placeholder="请填写您的报价区间">
			</view>
			<view class="fs16 bold6">您的联系方式</view>
			<view class="inp borb pt18 mb12 flex flexC">
				<input v-model="mobile" class="flex1 pb4" type="number" placeholder="请填写您的电话">
			</view>

			<view class="fs16 bold6">是否支持定制</view>
			<view class="inp borb pt18 mb12 flex flexC">
				<radio-group class="mb10 " @change="ding">
					<radio value="是" color="#FFCC33" />
					是
					<radio value="否" class="ml10" color="#FFCC33" />
					否
				</radio-group>
			</view>

			<view class="fs16 bold6">是否支持售后</view>
			<view class="inp  pt18 mb12 flex flexC">
				<radio-group class="mb10" @change="service">
					<radio value="是" color="#FFCC33" />
					是
					<radio value="否" class="ml10" color="#FFCC33" />
					否
				</radio-group>
			</view>

			<view class="flex flexC flexB aliC">
				<button @click="doSubmit" hover-class="none" class="bg41 r40 mt40 btn ">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				city: '',
				mobile: '',
				company: '',
				isDing:'',
				isService:'',
				roleName:'',
				price:'',
				type:''
			};
		},
		methods: {
			
			doSubmit(){
				
			},
			
			role(e){
				this.roleName = e.detail.value;
				console.info("===roleName===="+this.roleName);
				
			},

			service(e) {
				this.isService = e.detail.value;
				console.info("===service===="+this.isService);
			},
			ding(e) {
				this.isDing = e.detail.value;
				console.info("===isDing===="+this.isDing);
				
			},

			openLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.info(res)
						that.latitude = res.latitude;
						that.longitude = res.longitude;

						let regex =
							"(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)"
						let newAddress = res.address.match(regex);
						let group = newAddress.groups;


						that.province = group.province;
						that.city = group.city;

						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				})
			},


			contact() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync("tel")
				})
			},

			doSubmit() {
				let that = this;

				if(this.city == ''){
					uni.showToast({
						title:"请选择城市"
					})
					return;
				}
				if(this.name == ''){
					uni.showToast({
						title:"请填写名字"
					})
					return;
				}
				if(this.company == ''){
					uni.showToast({
						title:"请填写公司"
					})
					return;
				}
				if(this.isDing == ''){
					uni.showToast({
						title:"请选择是否支持定制"
					})
					return;
				}
				if(this.isService == ''){
					uni.showToast({
						title:"请选择是否支持售后"
					})
					return;
				}
				if(this.roleName == ''){
					uni.showToast({
						title:"请选择你的身份"
					})
					return;
				}
				if(this.type == ''){
					uni.showToast({
						title:"请填写您的产品类型"
					})
					return;
				}
				if(this.price == ''){
					uni.showToast({
						title:"请填写您的价格区间"
					})
					return;
				}
				let param = {
					city: this.city,
					name: this.name,
					mobile: this.mobile,
					company: this.company,
					isDing:this.isDing,
					isService:this.isService,
					roleName:this.roleName,
					price:this.price,
					type:this.type
				};
				uni.showLoading({
					icon: 'none',
					title: "提交中"

				})
				this.$api.addSupplier(param).then(res => {

					console.info(JSON.stringify(res));
					uni.hideLoading();
					if (res.code == 1) {
						uni.showModal({
							title:"提示",
							content:"提交成功,我们尽快会联系您",
							showCancel:false,
							confirmText:"知道了",
							complete() {
								uni.navigateBack({delta:1})
							}
						})

					} else {

					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.w100 {
		width: 100%;
	}

	.btn {
		width: 100%;
		line-height: 80rpx;
	}
</style>